<template>
    <div>
        <el-button type="primary" @click="openmodel()" size='small'>新增</el-button>
        <!-- @click='showModal' -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="50" value='id'>
            </el-table-column>
            <el-table-column prop="name" label="医院名称" width='200'>
            </el-table-column>
            <el-table-column prop="introduce" label="医院简介" width="300">
            </el-table-column>
            <el-table-column prop="address" label="医院地址" width="300">
            </el-table-column>
            <el-table-column prop="flags" label="标记" width="80">
            </el-table-column>
            <el-table-column prop="longitude" label="经度" width="80">
            </el-table-column>
            <el-table-column prop="latitude" label="纬度" width="80">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot='scope'>
                    <el-button type="primary" @click="updateHospital(scope.row)">修改</el-button>
                    <el-button type="danger" @click='deleteHospital(scope.row)'>删除</el-button>
                </template>
        </el-table-column>
  </el-table>


          <!-- 分页 -->
    <el-pagination layout="prev, pager, next" 
        background
        :total="total" 
        :page-size='params.pageSize' 
        :current-page='params.page' 
        @current-change='pageChange'>
    </el-pagination>

    <!-- model -->
    <el-dialog title="录入医院信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称"  >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" >
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                placeholder="请输入内容"
                v-model="form.introduce">
            </el-input>
        </el-form-item>
                <el-form-item label="省市"  >
        <el-cascader-panel v-model="form.pca" :options="pca" :props='{value:"name",label:"name",expandTrigger:"hover" }' ></el-cascader-panel>
        </el-form-item>
        
        <el-form-item label="详情地址" >
             <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                placeholder="请输入内容"
                v-model="form.address">
            </el-input>
        </el-form-item>
        <el-form-item label="标记"  >
          <el-input v-model="form.flags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经度"  >
          <el-input v-model="form.longitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="纬度"  >
          <el-input v-model="form.latitude" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertHospital()">保 存</el-button>
      </div>
    </el-dialog>

    </div>
</template>

<script>
// 引入省市区的文件
import pca from '@/assets/pca.json'
import axios from '@/http/axios'
import moment from 'moment'
import qs from 'qs'
export default {
    data(){
        return {
            pca,
            params:{
                page:1,
                pageSize:5
            },
            tableData:[],
            form:{
                province:'',
                city:'',
                area:''},
            total:0,
            dialogFormVisible : false
        }
    },
    filters:{
        datemake(str){
            return moment(str).format('YYYY-MM-DD')
        }
    },
    watch:{
        // 深度监听
        params:{
            handler:function(){
                this.queryAll()
            },
            deep:true
        }
    },
    created(){
        this.queryAll()
    },
    methods:{
        // 显示医院数据
        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 分页的总条数
                this.total = res.data.data.total;
                // 表格数据
                this.tableData = res.data.data.list
            })
        },
        //添加医院信息
        insertHospital(){
           var data = Object.assign({},this.form)
            data.province = data.pca[0]
            data.city = data.pca[1]
            data.area = data.pca[2]
            delete data.pca
            axios({
                url:'http://121.199.29.84:8001/hospital/saveOrUpdate',
                data:qs.stringify(data),
                method:'post'
                }).then((res)=>{
                    //刷新用户数据
                    this.queryAll()
                    this.$message({
                        message:'保存成功！',
                        type: 'success'
                    });
                })
                //关闭模态框
                this.dialogFormVisible = false
        },
        updateHospital(item){
            this.form=JSON.parse(JSON.stringify(item))
            this.dialogFormVisible = true
            this.form.pca = []
            this.form.pca.push(item.province,item.city,item.area)
        },
        //删除资讯分类信息
        deleteHospital(item){
            var obj={
                id:item.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    axios({
                        url:'http://121.199.29.84:8001/hospital/deleteById',
                        params:obj,
                        method:'get'
                    }).then((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                    });
                    //刷新用户数据
                    this.queryAll()
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //打开模态框
        openmodel(){
            this.dialogFormVisible = true
            this.form={}
        },
        // 分页页码改变时触发赋值
        pageChange(page){
            this.params.page = page
        },
    }
}
</script>